<template>
  <div class="articleItems-container">
    <van-cell-group>
      <van-cell :to="{
        name: 'article',
        params: {
          articleId: article.art_id
        }
      }">
        <div slot="title" class="article-title van-multi-ellipsis--l3">{{ this.article.title }}</div>
        <div class="label" slot="label">
          <div  v-if="this.article.cover.type === 3" class="cover-wrap">
            <div class="cover-wrap-item" v-for="(image, index) in this.article.cover.images" :key="index">
              <van-image class="cover-images" :src="image" />
            </div>
          </div>
          <div class="tips">
            <span class="username">{{ this.article.aut_name }}</span>
            <span class="comment">{{ this.article.comm_count + '评论' }}</span>
            <span class="publishtime">{{ this.article.pubdate | relativeTime  }}</span>
          </div>
        </div>
        <van-image v-if="this.article.cover.type === 1" class="cover-image" :src="this.article.cover.images[0]" />
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
export default {
  name: 'articleItems',
  data () {
    return {}
  },
  props: {
    article: {
      type: Object,
      required: true
    }
  }
}
</script>
<style lang="less">
.articleItems-container{
  .van-cell{
    .van-cell__title{
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      .article-title{
        font-size: 16px;
      }
    }
    .van-cell__value{
      flex: unset;
      width: 116px;
      height: 73px;
      margin-left: 12px;
    }
    .van-cell__label{
      .cover-wrap{
        padding: 15px 0;
        display: flex;
        .cover-wrap-item{
          flex: 1;
          height: 73px;
          &:not(:last-child) {
            padding-right: 4px;
          }
          .cover-images{
            width: 100%;
            height: 73px;
          }
        }
      }
      .tips{
        .comment{
          margin: 0 12px;
        }
      }
    }
    .cover-image{
      width: 116px;
      height: 73px;
    }
  }
}
</style>
